import React from "react";
import {
  Form,
  Input,
  Button,
  Dialog,
  TextArea,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
  NavBar,
  Toast,
  Ellipsis,
  Space,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import http from "../../api/http";

function Index() {
  const content =
    "友列高铁承诺保证您的账号及个人信息的安全，绝对不提供给任何第三方，绑定既是为同意《免责与隐私申明》";

  const navigate = useNavigate();
  const onFinish = async (values) => {
    const res = await http.post("/api/login", values);
    const { data, code, message } = res.data;
    console.log(res.data);
    if (code === 200) {
      localStorage.setItem("token", data.token);
      localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
      Toast.show({
        icon: "success",
        content: message,
      });
      navigate("/");
    } else {
      Toast.show({
        icon: "fail",
        content: message,
      });
    }
  };

  return (
    <div>
      <NavBar onBack={() => navigate("/")}>车票登录系统</NavBar>
      <h2>登录您的12306账号</h2>
      <Ellipsis direction="end" rows={2} content={content} />
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[
            {
              required: true,
              message: "验证码不能为空",
              pattern: /^\w{6,12}$/,
            },
          ]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: "请输入6-12位之间的数",
              pattern: /^\w{6,12}$/,
            },
          ]}
        >
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default Index;
